<template>
    <div class="yuncai-purchase-container animate__animated animate__flipInY">
        <!-- animate__slideInUp -->
        <div class="title">{{ title }}</div>
        <div class="img_box">
            <img :src="mallUrl" />
        </div>
        <div class="desc">
            {{ desc }}
        </div>
        <div class="btn">立即采购<i class="el-icon-right"></i></div>
    </div>
</template>

<script>
export default {
    props: {
        mallUrl: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        desc: {
            type: String,
            required: true,
        },
    },
};
</script>

<style scoped lang="less">
@import "~@/assets/css/mixin.less";
.yuncai-purchase-container {
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 50px;
    .title {
        height: 50px;
        font-size: 28px;
        color: #f2f9ff;
    }
    .img_box {
        width: 250px;
        height: 228px;
    }
    .desc {
        width: 100%;
        font-size: 12px;
        color: #98a5b2;
        text-align: center;
        line-height: 20px;
        margin: 10px 0 20px 0;
    }
    .btn {
        .default-btn();
        width: 120px;
    }
}
</style>